<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
   
<!DOCTYPE html>
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       
       	
    <title>Main Page</title>
<link href="./css/stylesheet.css" rel="Stylesheet" media="screen"/>
    <style type="text/css">

.bgCover { background:#000; position:absolute; left:0; top:0; display:none; overflow:hidden}
.overlayBox {
	/*border:5px solid #09F;*/
	position:absolute;
	display:none;
	width:1160px;
	height:580px;
    margin:25px 0px 0px 0px;
	/*margin:0px auto;*/
	background-color:#fff;
	/*height:3000px;*/
	
}
.overlayContent {
	padding:50px;
}
.closeLink {
	float:right;
	color:black;
}
a:hover { text-decoration:none; }

h2 {
	padding:5px;
	margin:0;
}
</style>

</head>
<body>

    <form action="">
    <div class="navibar">
    <ul>
	<li>File
        <ul>
			<!--a href="barcode.html" class="launchLink"-->
			<li><a href="#" class="launchLink" onclick="javascript:doOverlayOpen('./jsp/File/barcode.jsp')">Print Barcode 39</a></li><img src="images/barcode-32(2).png" alt="barcode" class="btnimg2"/>
			<li>Log Off</li><img src="images/Key-32new.png" alt="key" class="btnimg2"/>
            <li>Quit</li><img src="images/exit-32.png" alt="quit" class="btnimg2"/>
		</ul></li> 
	<li>Issue/Deposit
        <ul>
			<li><a href="#" class="launchLink" onclick="javascript:doOverlayOpen('./jsp/Books/BooksIssue.jsp')">Books</a></li><img src="images/bookmarks_32.png" alt="books" class="btnimg2"/>
			<li><a href="#" class="launchLink" onclick="javascript:doOverlayOpen('./jsp/Reservation/ReservationList.jsp')">Books Reservation List</a></li><img src="images/Calender-32.png" alt="bkreservation" class="btnimg2"/>
		</ul></li>
    <li>Make Data Entry
        <ul>
			<li>Book Entry</li> <img src="images/bookmarks_32.png" alt="bkentry" class="btnimg2"/>
			<li>Patron Entry </li> <img src="images/Man_Black.png" alt="patronentry" class="btnimg2"/>
            <li>Calculator </li><img src="images/calculator.png" alt="cal" class="btnimg2"/>
		</ul></li>
	<li>Find
        <ul>
			<li><a href="#" class="launchLink" onclick="javascript:doOverlayOpen('./jsp/Find/FindBook.jsp')">Books</a></li> <img src="images/bookmarks_32.png" alt="books" class="btnimg2"/>
			<li>Patron </li> <img src="images/Man_Black.png" alt="patron" class="btnimg2"/>
		</ul></li>
    <li>Search
        <ul>
			<li>Books </li> <img src="images/bookmarks_32.png" alt="bks" class="btnimg2"/>
			<li>Patrons </li> <img src="images/Man_Black.png" alt="ptrns" class="btnimg2"/>
		</ul></li>
    <li>View Reports
        <ul>
			<li>Issued Books </li> <img src="images/bookmarks_32.png" alt="issuedbks" class="btnimg2"/>
			<li>Patron History </li> <img src="images/Man_Black.png" alt="ptrnhistry" class="btnimg2"/>
			<li>Library Purchase Details </li><img src="images/Purse.png" alt="LibraryPurchase" class="btnimg2"/>
			<li>Books Count For All Subjects </li><img src="images/NeedleLeftYellow2.png" alt="bksCount" class="btnimg2"/>
            <li>Complete Books List </li><img src="images/bookmarks_32.png" alt="cmpltbks" class="btnimg2"/>
            <li>Complete Patron List </li><img src="images/Man_Black.png" alt="cmpltptrns" class="btnimg2"/>
            <li>Books By Author </li><img src="images/Man_Red.png" alt="bksbyAuthor" class="btnimg2"/>
            <li>Books By Subject </li><img src="images/Flag1RightGreen2.png" alt="bksbySbjct" class="btnimg2"/>
            <li>Books By Status </li><img src="images/BulbGrey.png" alt="bksbyStatus" class="btnimg2"/>
            <li>Income From Fine </li><img src="images/Money.png" alt="income" class="btnimg2"/>
            <li>Letters </li><img src="images/postage_stamp_32.png" alt="letters" class="btnimg2"/>
		</ul></li>
    <li>Settings
        <ul>
			<li>User Settings </li> <img src="images/user-32.png" alt="user" class="btnimg2"/>
			<li>Home Page </li><img src="images/Web-32.png" alt="home" class="btnimg2"/>
			<li>Program Settings </li><img src="images/Settings_32.png" alt="prgrmSttngs" class="btnimg2"/>
		</ul></li>
    <li>Help
        <ul>
			<li>Help </li> <img src="images/Help_32.png" alt="help" class="btnimg2"/>
			<li>About </li><img src="images/Gnome-Help-About-32.png" alt="about" class="btnimg2"/>
		</ul></li>
	</ul>
    </div>
   
  
        <input class="btnimgtxt" type="button" name="issue" id="issueid"  value="Issue Deposit Books"/><img src="images/Money_Calculator_64.png" alt="issue" class="btnimg"/><br />
   
    <input class="btnimgtxt" type="button" name="bookentry" id="bookentryid" value="Book Entry"/><img src="images/bookmarks_64.png" alt="bentry" class="btnimg"/><br />
     
      <input class="btnimgtxt" type="button" name="patron" id="patronid" value="Patron Entry"/><img src="images/Man_Black_64.png" alt="pentry" class="btnimg"/><br />
     
        <input class="btnimgtxt" type="button" name="booksearch" id="booksearchid" value="Book Search"/><img src="images/Block-2-64.png" alt="bsearch" class="btnimg"/><br />
     
    <input class="btnimgtxt" type="button" name="seetings" id="seetingsid" value="Settings"/><img src="images/Settings_64.png" alt="settings" class="btnimg"/><br />
      <input class="btnimgtxt" type="button" name="logoff" id="logoffid" value="Log off"/><img src="images/Lock_64x64.png" alt="logoff" class="btnimg" action="${WEB_BASE}LogoutServlet"/><br />
    </form>
<div class="bgCover">&nbsp;</div>
<div class="overlayBox">
	<div class="overlayContent">
        <a href="#" class="closeLink">X</a>
		<form action="">
			<input type="hidden" name="uploadtoken" value="<?= $upload_token ?>" />
			<input type="hidden" name="callback" value="<?= $callback_url ?>" />
			
			
		</form>
		
    </div>
	<!-- add dynamic html content here-->
	<div id="dynHtml"></div>
</div>
<!--a href="#" class="launchLink">Launch Window</a>

<!-- normal content displayed when overlay is not open... -->



<script language="javascript">

function showOverlayBox() {
	//if box is not set to open then don't do anything
	if( isOpen == false ) return;
	// set the properties of the overlay box, the left and top positions
	$('.overlayBox').css({
		display:'block',
		left:( $(window).width() - $('.overlayBox').width() )/2,
		top:( $(window).height() - $('.overlayBox').height() )/2 -20,
		position:'absolute'
	});
	// set the window background for the overlay. i.e the body becomes darker
	$('.bgCover').css({
		display:'block',
		width: $(window).width(),
		height:$(window).height(),
	});
}
function doOverlayOpen(link) {
	//copy inner html
	$.get(link, {}, function(out) {
		$('#dynHtml').html(out);
	}, 'html');
	
	

	
	//set status to open
	isOpen = true;
	showOverlayBox();
	$('.bgCover').css({opacity:0}).animate( {opacity:0.5, backgroundColor:'#000'} );
	// dont follow the link : so return false.
	
	return false;
}
function doOverlayClose() {
	//set status to closed
	isOpen = false;
	$('.overlayBox').css( 'display', 'none' );
	// now animate the background to fade out to opacity 0
	// and then hide it after the animation is complete.
	$('.bgCover').animate( {opacity:0}, null, null, function() { $(this).hide(); } );
}
// if window is resized then reposition the overlay box
$(window).bind('resize',showOverlayBox);
// activate when the link with class launchLink is clicked
//$('a.launchLink').click( doOverlayOpen );
// close it when closeLink is clicked
$('a.closeLink').click( doOverlayClose );


</script>


</body>
</html>